<template>
    <div>
        <nav class="navClass">
            <span 
            @click="mackActive(index)"
            v-for="(item ,index) of items"
            :class="item.active?'bg':''"
            >{{item.name}}</span>
          
            <div class="clear"></div>
        </nav>
        <p>{{text}}</p>
    </div>
</template>
<script>
export default {
    name:"App",
    data(){
        return{
            text:"HTML",
            items:[
                {
                    name:"HTML",
                    active:true
                },
                 {
                    name:"CSS",
                    active:false
                },
                 {
                    name:"JAVASCRIPT",
                    active:false
                }, {
                    name:"Vue.js",
                    active:false
                }
            ]
        }
    },
    methods:{
        mackActive(index){
            let _self = this;
            for(let item of _self.items){
                item.active = false
            }
            _self.items[index].active = true;
            _self.text = _self.items[index].name;
        }
    }
}
</script>
<style>
    .navClass{
        margin: 30px auto;
        width:400px;
    }
    .navClass span{
        float: left;
        width: 100px;
        line-height: 50px;
        background-color: green;
        color: aliceblue;
        text-align: center;
    }
    .navClass .bg{
        background: pink;
    }
    .clear{
        clear: both;
    }
    p{
        text-align: center;
    }
</style>